/**
* Created by wl
* 项目管理>持有中-添加页编辑信息头部-投后项目组成员
*/
<template>
    <div>
        <div class="ca-title">
            <el-form-item label="投后项目组成员 （历史记录）" label-width="250px">
            </el-form-item>
        </div>
        <el-form ref="dataForm">
            <table class="ca-table ca-m-t-15">
                <tr>
                    <th class="el-wid-75">项目成员</th>
                    <th class="el-wid-20">时间</th>
                    <th class="p-tb-0 el-wid-5">
                        <button type="button" class="ca-btn ca-btn-round" @click="addGroup">
                            <i class="fa fa-plus"></i>
                        </button>
                    </th>
                </tr>
                <tr v-for="(item, index) in value" :key="index">
                    <td class="el-wid-75">
                        <el-select v-model="item.userIds" multiple placeholder="请选择" class="el-wid-100">
                            <el-option
                            v-for="(val, index) in guest"
                            :key="index"
                            :label="val.userName"
                            :value="val.id">
                            </el-option>
                        </el-select>
                    </td>
                    <td class="el-wid-20">
                        <el-date-picker type="date" placeholder="选择日期" class="el-wid-100" format="yyyy-MM-dd" v-model="item.groupDate"></el-date-picker>
                    </td>
                    <td class="p-tb-0 el-wid-5">
                        <button type="button" class="ca-btn ca-btn-round" @click="delGroup(index)">
                            <i class="fa fa-times"></i>
                        </button>
                    </td>
                </tr>
            </table>
        </el-form>
    </div>
</template>

<script type="text/ecmascript-6">

export default {
    data() {
        return {
            group: {
                groupDate: '',
                userIds: [],
            },
            guest: this.$store.state.user.department.userEntityList, //投后负责人
        }
    },
    watch: {
        // 深度 watcher
        value: {
            handler: function (val) {
                this.$emit('input', val);
            },
            deep: true
        }
    },
    props: {
        value: {
            type: Array,
            default: function () {
                return []
            }
        },
    },
    mounted() {
    },
    methods: {
        // 添加成员
        addGroup() {
            this.value.push(Object.assign({}, {groupDate: new Date(), userIds: []}));
        },
        // 删除成员
        delGroup(index) {
            this.$confirm('是否删除?', '提示', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning',
                showClose: false,
            }).then(() => {
                this.value.splice(index, 1);
            })
        }
    },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-wid-5 {
    width: 5%;
}
.el-wid-20 {
    width: 20%;
}
.el-wid-75 {
    width: 75%;
}
.el-wid-100 {
    width: 100%;
}
</style>
